<template>
	<om-page :title="pageTitle">
		<view class="flex justify-center padding-top"><text class="text-bold text-lg">我的应用</text></view>
		<uni-card style="border: none;border-radius: 1px; padding-bottom: 12px;" :titleUnderline="false" :is-full="true" :title="'已选[' + commonMenuList.length+']'">
			<view slot="extra">
				<cmd-icon color="#ff0000" size="12" type="close" @click="clearAllSelect">
					<text>清空</text>
				</cmd-icon>
			</view>
			<om-menu
				ref="commonMenu"
				class="padding-top-sm"
				@click="clickDeleteBadge"
				:menuList="commonMenuList"
				:colLen="5"
				:bordered="true"
				fontSize="small"
			></om-menu>
		</uni-card>
		<om-bottomline :content="calcContent"></om-bottomline>
		<view style="margin-bottom: 50px;">
			<view class="flex justify-center padding-top"><text class="text-bold text-lg">全部应用</text></view>
			<view v-for="(item, index) in wxMenuList" :key="index">
				<view v-if="item.menu && item.menu.length">
					<uni-card style="border: none;border-radius: 1px; padding-bottom: 12px;" :titleUnderline="false" :is-full="true" :title="item.groupName">
						<om-menu :menuList="item.menu" :colLen="5" :bordered="true" fontSize="small" :group="index" @click="clickAddBadge"></om-menu>
						<view slot="extra">
							<cmd-icon color="#05be90" size="12" type="add" :data-group='index' @click="selectAll">
								<text>全选</text>
							</cmd-icon>
						</view>
					</uni-card>
					<view style="height: 1px" class="bg-gray"></view>
				</view>
			</view>
		</view>
		<view class="om-bottom">
			<button class="om-btn-color" style="width: 100%;color:#fff;" @click="save">
				<tui-icon color="#fff" :size="28" name="edit"></tui-icon>
				<text class="text-white">完成</text>
			</button>
		</view>
	</om-page>
</template>

<script>
	import { hasValue } from '@/static/js/formUtil.js';
export default {
	data() {
		return {
			initList: [], //初始的常用工具Id数组
			wxMenuList: [],
			pageTitle: '',
			num: 0,
			scrollViewHeight: 20,
			commonMenuList: [],
			pcUse:false
		};
	},
	computed: {
		calcContent:function(){
			if(this.commonMenuList.length){
				return "以上应用展示在首页工作场景"
			}else{
				return "请配置您的专属工作场景吧"
			}
		}
	},
	methods: {
		clearAllSelect(){
			let _that = this
			this.commonMenuList.forEach((e,index)=>{
				e.badgeText = '+';
				e.badgeType = 'success';
				let group = _that.wxMenuList[e.group];
				group.menu = [e, ...group.menu].sort((a, b) => {
					return a.index - b.index;
				});
			})
			this.commonMenuList = []
		},
		selectAll(ev){
			let _that = this
			let groupIndex = ev.currentTarget.dataset.group;
			let group = _that.wxMenuList[groupIndex];
			let menu = this._.cloneDeep(group.menu)
			menu.forEach((e,index)=>{
				e.badgeText = '-';
				e.badgeType = 'error';
				_that.commonMenuList.push(e);
			})
			group.menu = []
		},
		/**
		 * 判断控件
		 */
		switchChange(e) {
			this.pcUse = e.detail.value
		},
		clickAddBadge(e) {
			let group = this.wxMenuList[e.group];
			let objArr = group.menu.splice(e.index, 1);
			let obj = objArr[0];
			obj.badgeText = '-';
			obj.badgeType = 'error';
			this.commonMenuList.push(obj);
		},
		clickDeleteBadge(e) {
			let objArr = this.commonMenuList.splice(e.index, 1);
			let obj = objArr[0];
			obj.badgeText = '+';
			obj.badgeType = 'success';
			let group = this.wxMenuList[obj.group];
			group.menu = [obj, ...group.menu].sort((a, b) => {
				return a.index - b.index;
			});
		},
		loadMenu() {
			let _that = this;
			_that.om.request('sceneMenu/getAllMenuList').then(res => {
				if (res.succeed) {
					var commonMap = {};
					var otherArr = [];
					for (var i = 0; i < res.value.length; i++) {
						let group = res.value[i];
						let rArr = [];
						for (var j = 0; j < group.menu.length; j++) {
							let m = group.menu[j];
							m.h5url = '';
							m.url = '';
							m.group = i;
							m.index = j;
							if(!m.iconCls){
								console.log(m)
							}
							if (~_that.initList.indexOf(m.id)) {
								m.badgeText = '-';
								m.badgeType = 'error';
								commonMap[m.id] = m;
							} else {
								m.badgeText = '+';
								m.badgeType = 'success';
								rArr.push(m);
							}
						}
						otherArr.push({
							groupName: group.groupName,
							menu: rArr
						});
					}
					if (_that.initList.length) {
						_that.commonMenuList = _that.initList.filter(e=>hasValue(commonMap[e])).map(e => commonMap[e]);
					}
					_that.wxMenuList = otherArr;
				}
			});
		},
		save() {
			let _that = this;
			if(!_that.commonMenuList.length){
				_that.om.toast("请至少选择一个")
				return
			}
			_that.om
				.request(
					'sceneMenu/save',
					{
						menuIds: _that.commonMenuList.map(a => a.id).join(','),
						pcUse:_that.pcUse
					},
					'post'
				)
				.then(res => {
					if (res.succeed) {
						uni.setStorage({
							key: 'scene-menu-reload',
							data: true
						});
						uni.navigateBack();
					}
				});
		}
	},
	onLoad(options) {
		this.pageTitle = '工作场景';
		let _that = this
		this.om.request("sceneMenu/getSelectMenuList").then(res=>{
			if(res.succeed){
				_that.initList = res.value.selectedMenuList
				_that.loadMenu();
			}
		})
		
	}
};
</script>

<style>
.scroll-Y {
	top: 0;
	position: fixed;
	z-index: 10;
	background-color: white;
	box-shadow: 0 1px 10px #929191; /*for Android*/
	-webkit-box-shadow: 0px 1px 10px #b3b2b2; /*for IOS*/
}
</style>
